<template>
	<div class="subscribe_term">
		<myheader :type_title="type_title" :title="title"></myheader>
		<div class="title">有满足您需要的房源时，我们会第一时间通知您！</div>
		<div class="info">
			<ul>
				<li>
					<div><span>*</span>城市</div>
					<div>
						<router-link to="/subscribe_address"><span></span></router-link>
					</div>
				</li>
				<li>
					<div><span>*</span>交通</div>
					<div>
						<router-link to="/subscribe_type"><span></span></router-link>
					</div>
				</li>
				<li>
					<div class="ckeck">
						<span v-bind:class="acive" @click="btnact"></span>
						<input hidden="hidden" id="houses" name="houses" type="checkbox" />
						<label for="houses">楼盘</label>
					</div>
					<div>
						<router-link to="/subscribe_house"><span></span></router-link>
					</div>
				</li>
				<li>
					<div><span>*</span>面积/价格</div>
					<div>
						<router-link to="/subscribe_area"><span></span></router-link>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import myheader from '@/components/user/myheader'
	export default {
		name: "subscribe_term",
		data() {
			return {
				title: "创建订阅条件",
				type_title: "norights",
				acive: 'active',
			}
		},
		methods: {
			btnact() {
				if (this.acive == "active") {
					this.acive = "active1";
				} else {
					this.acive = "active";
				}
			}
		},
		components: {
			myheader
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.subscribe_term {
		width: 100%;
		height: auto;
		background: #F1F1F1;
	}
	
	.title {
		width: 100%;
		height: 0.7rem;
		line-height: 0.7rem;
		color: #999999;
		padding: 0 0.3rem;
		box-sizing: border-box;
		margin-top: 0.05rem;
		margin-bottom: 0.05rem;
		font-size: 0.3rem;
		background: white;
	}
	
	.info {
		width: 100%;
		height: auto;
		background: white;
	}
	
	.info ul {
		width: 100%;
		height: auto;
	}
	
	.info li {
		width: 100%;
		height: 1.2rem;
		border-bottom: 0.03rem solid #F0F0F0;
		padding: 0 0.3rem;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #666666;
		font-size: 0.3rem;
	}
	
	.info li span {
		display: inline-block;
		padding: 0 0.1rem;
		box-sizing: border-box;
		color: red;
	}
	
	.info li .ckeck {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.info li .ckeck span.active {
		display: inline-block;
		width: 24px;
		height: 24px;
		background: url(../../../static/image/icon_user.png) no-repeat;
		background-position: -614px -144px;
		display: inline-block;
		padding: 0 0.1rem;
		box-sizing: border-box;
	}
	
	.info li .ckeck span.active1 {
		display: inline-block;
		width: 24px;
		height: 24px;
		background: url(../../../static/image/icon_user.png) no-repeat;
		background-position: -614px -112px;
		display: inline-block;
		padding: 0 0.1rem;
		box-sizing: border-box;
	}
	
	.info li div:last-of-type {
		width: 70%;
		height: 100%;
	}
	
	.info li div:last-of-type a {
		display: inline-block;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	.info li div:last-of-type span {
		display: inline-block;
		width: 16px;
		height: 26px;
		background: url(../../../static/image/icon_user.png) no-repeat;
		background-position: -622px -66px;
	}
</style>